<template>
  <div>

	<myheader></myheader>
	

	<section class="featured-block text-center">
		<div class="container">
			
			<Breadcrumb :datas='datas'></Breadcrumb>
			<form>
			   <Avatar :src="src" :width='150' fit="fill"></Avatar>
			<table>
				<tr>
					<td>密码：<input type="password" v-model="password"></td>
				</tr>
				<tr>
					<td>确认密码：<input type="password" v-model="password1"></td>
				</tr>
				<tr>
					<td>头像上传：<input type="file" @change="upload"></td>
				</tr>
				<tr>
					<td>七牛头像上传：<input type="file" @change="qiniu"></td>
				</tr>
				<tr>
					<td><Button @click="sub">确认修改</Button></td>
				</tr>
				<tr>
					<td>视频上传：<input type="file" @change="qiniu_video"></td>
				</tr>
				<tr>
					<td>{{ loadpercent }}

						<!-- HeyUI进度条 -->
						<Progress v-show="loadpercent_int" :percent="loadpercent_int" color="green">
							<span slot="title"></span><span slot="text">{{ loadpercent_int }}%</span>
						</Progress>


					</td>
				</tr>
				<tr>
					<td><video id='video' v-show="vsrc" :src="vsrc" width="200px" height="250px" controls="controls" muted></video></td>
				</tr>
				<tr>
					<td><Button v-show="vsrc" @click="changepic">{{ mybutton }}</Button></td>
				</tr>
				
			</table>
			<br /><br />
			<div style="text-align:left">
				关注过的商品：<br>
				<Checkbox :datas='goodslist' v-model="goods_value"></Checkbox>
				<br>
				&nbsp;<Button @click="changeflow">点击取关</Button>
			</div>
			</form>


		</div>
	</section>
	

	<myfooner></myfooner>

  </div>
  
</template>


 
<script>
import myheader from './myheader'
import myfooner from './myfooner'
import {config} from '../config'

export default {
  data () {
    return {
	  msg: "这是一个变量",
		//   面包屑导航
		datas:[{title:"首页",route:{name:"index"}},{title:"我的首页"}],
		password:"",
		password1:"",
		// 滑块验证码参数
		adminurl:config['adminurl'],
		src:"",
		uptoken:"",
		vsrc:"",
		// 进度条
		loadpercent:"",
		loadpercent_int:"",
		// 七牛的图片地址
		qiniuurl:"http://q7gy8y2j8.bkt.clouddn.com/",
		mybutton:"进入画中画",
		goodslist:[],
		goods_value:[],
		goods_dic:{}

    }
  },
  components:{
	  "myheader":myheader,
	  "myfooner":myfooner,

  },
  mounted:function(){
		this.get_uptoken()
		this.get_imgurl()
		this.get_userinfo()
		this.get_goods()
   
  
},
  methods:{
	//   批量取关
	  changeflow(){
		  if(this.goods_value.length == 0){
			  this.$Message('请选择需要取关的商品')
			  return false
		  }

		  var ids = []
		  for(let i=0;i<this.goods_value.length;i++){
			ids.push(this.goods_dic[this.goods_value[i]])
		  }
		  ids = JSON.stringify(ids)
		  this.axios.get(this.adminurl+"/getflow/",{params:{gids:ids,uid:localStorage.getItem('uid'),type:"0"}}).then(res=>{
				this.$Message(res.data.message)
				if(res.data.code == 200){
					for(let i=0;i<this.goods_value.length;i++){
						this.goodslist.splice(this.goodslist.indexOf(this.goods_value[i]),1)
		  			}
				}
			})
	  },
	  //关注的商品
	  get_goods(){
		  this.axios.get(this.adminurl+'/uidflow',{params:{uid:localStorage.getItem('uid')}}).then(res=>{
				
				for(let i=0;i<res.data.length;i++){
					this.goodslist.unshift(res.data[i].name)
					this.goods_dic[res.data[i].name] = res.data[i].id
				}				
			})
	  },
	  sub(){
			// 判断俩次密码是否一致
			if(this.password != this.password1){
				this.$Message('俩次密码不一致')
				return false
			}
		  this.axios.get(this.adminurl + '/changepassword/',{params:{uid:localStorage.getItem('uid'),password:this.password,token:localStorage.getItem('token')}}).then(res=>{
			  this.$Message(res.data.message)
				
		  })



		},
		upload(e){
			// 获取文件对象
			let file = e.target.files[0]

			// 声明参数
			let param = new FormData();
			// 添加文件
			param.append('file',file,file.name)

			// 声明请求头
			let config = {headers:{'Content-Type':"multipart/form-data"}};

			this.axios.post(this.adminurl + '/uploadfile/',param,config).then(res=>{
				this.src = this.adminurl+'/static/upload/'+res.data.filename
				
		  })



		},
		qiniu(e){
			
			// 获取文件对象
			let file = e.target.files[0]

			// 声明参数
			let param = new FormData();
			// 添加文件
			param.append('file',file)
			// 上传文件
			param.append('token',this.uptoken)

			const axios_qiniu = this.axios.create({withCredentials:false})

			axios_qiniu({
				method:"POST",
				url:"http://up-z1.qiniu.com/",
				data:param,
				timeout:30000,
				

			}).then(res=>{
				console.log(res)
				// url拼接
				this.src = this.qiniuurl + res.data.key
				this.save_imgurl(res.data.key)

			})


		},
		qiniu_video(e){
			
			// 获取文件对象
			let file = e.target.files[0]

			// 声明参数
			let param = new FormData();
			// 添加文件
			param.append('file',file)
			// 上传文件
			param.append('token',this.uptoken)

			const axios_qiniu = this.axios.create({withCredentials:false})

			axios_qiniu({
				method:"POST",
				url:"http://up-z1.qiniu.com/",
				data:param,
				timeout:30000,
				onUploadProgress:(e)=>{
					// 设置总进度对象
					var complete =  (e.loaded / e.total);

					// 安慰剂按钮  上传完成后可能不是100%
					if(complete < 1){
						this.loadpercent = (complete * 100).toFixed(2) + '%'
						this.loadpercent_int = Number((complete * 100).toFixed(2))
					}

				}

			}).then(res=>{
				console.log(res)
				// url拼接
				this.vsrc = this.qiniuurl + res.data.key
				this.loadpercent = "100%"
				this.loadpercent_int  = 100

			})


		},
		get_uptoken(){
			this.axios.get(this.adminurl+'/qiniu').then(res=>{
				this.uptoken = res.data.token

				

			})
		},
		save_imgurl(key){
			this.axios({
				url:this.adminurl+"/qiniu/",
				method:"POST",
				data:{
					"url":key,
					
				},
				params:{
					'uid':localStorage.getItem('uid'),
					"token":localStorage.getItem('token')
					
				}
			})
			.then(res=>{
				this.$Message(res.data.message)
			})
		},
		get_imgurl(){
			this.axios({
				url:this.adminurl+"/uploadfile/",
				params:{
					uid:localStorage.getItem('uid'),
					token:localStorage.getItem('token')
				}
			})
			.then(res=>{
				this.src = this.qiniuurl+res.data.imgurl
			})
		},
		upvideo(e){
				// 获取文件对象
			let file = e.target.files[0]

			// 声明参数
			let param = new FormData();
			// 添加文件
			param.append('file',file,file.name)

			// 声明请求头
			let config = {headers:{'Content-Type':"multipart/form-data"}};

			this.axios.post(this.adminurl + '/uploadfile/',param,config).then(res=>{
				this.vsrc = this.adminurl+'/static/upload/'+res.data.filename
				
		  })
		},
		get_userinfo(){
			this.axios({
				url:this.adminurl+"/userinfo/",
				params:{
					uid:localStorage.getItem('uid'),
					token:localStorage.getItem('token')
				}
			})
			.then(res=>{

			})
		},
		// 画中画
		changepic(){
			if(video !== document.pictureInPictureElement){

  				//尝试进入画中画模式
  				video.requestPictureInPicture();

  				this.mybutton = '退出画中画';


  			}else{

  				//退出画中画
  				document.exitPictureInPicture();

  				this.mybutton = '进入画中画';
  			}
		}
  }
}


</script>
 
<style>



</style>